<template>
  <div class="app-container">
    <div class="searchBox">
      <el-form
        :model="search"
        ref="searchForm"
        label-position="right"
        label-width="150px"
        class="searchBox-content"
      >
        <el-row>
          <el-col :span="8">
            <el-form-item label="事项标题：" prop="instanceTitle">
              <el-input v-model="search.instanceTitle" placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="接收时间：" prop="receiveTime">
              <el-date-picker
                v-model="search.receiveTime"
                @change="receiveTimePickerChange"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd HH:mm:ss"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              <el-button style="margin-left: -100px;" type="primary" @click="searchQuery">查询</el-button>
              <el-button type="info" @click="search = {};searchQuery()">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="事项类型：" prop="appCode">
              <el-select filterable v-model="search.appCode">
                <el-option
                  v-for="item in controlData.appOptions"
                  :key="item.appCode"
                  :label="item.appName"
                  :value="item.appCode"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="办理时间：" prop="finishTime">
              <el-date-picker
                v-model="search.finishTime"
                @change="finishTimePickerChange"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd HH:mm:ss"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <qm-table
      ref="qmTable"
      :data="query"
      :showCheckbox="false"
      :showOrder="false"
      :showView="false"
      :showDelete="false"
      :showAdd="false"
      :showToolbar="false"
      :menuOptions="{ width: '100px' }"
    >
      <qm-table-column width="100px" field="appName">事项类型</qm-table-column>
      <qm-table-column field="instanceTitle">事项标题</qm-table-column>
      <qm-table-column field="taskName">环节名称</qm-table-column>
      <qm-table-column width="100px" field="assigneeName">处理人</qm-table-column>
      <qm-table-column width="170px" field="startTime" fieldtype="datetime">任务接收时间</qm-table-column>
      <qm-table-column width="170px" field="finishTime" fieldtype="datetime">办理完成时间</qm-table-column>
      <qm-table-column width="100px" field="processStatus">事项状态</qm-table-column>

      <template v-slot:moreBtn="{ row }">
        <el-button type="text" @click="view(row)">查看</el-button>
        <el-button type="text" @click="back(row)">撤回</el-button>
      </template>
    </qm-table>
  </div>
</template>

<script>
import Controller from "@/libs/framework/controller";
import request from "@/utils/request";

export default class Instance extends Controller {
  onBeforeInit() {
    this.urls = {
      query: "/workflow/doneList/query",
    };
    this.urls.model = "/workflow/doneList/getListModel";
  }

  mixin() {
    return {
      data() {
        return {
          search: {
            finishTime: [],
            receiveTime: [],
          },
        };
      },
      computed: {},
      methods: {
        back(row) {
          this.$confirm("确定撤回吗？", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              request({
                url: "/smartform/smartForm/processRollbackAssign2",
                method: "post",
                data: { taskId: row.taskId, instanceId: row.instanceId },
              })
                .then((r) => {
                  if (r.success) {
                    this.$refs["qmTable"].refresh();
                    this.$message({
                      type: "success",
                      message: "撤回成功!",
                    });
                  } else {
                    this.msgError(r.message);
                  }
                })
                .catch((e) => {
                  this.msgError(e || "数据请求失败");
                });
            })
            .catch(() => {});
        },
        receiveTimePickerChange(e) {
          this.search.receiveStartTime = e[0];
          this.search.receiveEndTime = e[1];
        },
        finishTimePickerChange(e) {
          this.search.startTime = e[0];
          this.search.endTime = e[1];
        },
        view(row) {
          this.getWorkflowArgs({ taskId: row.taskId }).then((rlt) => {
            if (rlt && rlt.appUrl && rlt.appCode) {
              this.$root.openModal(
                `${rlt.appUrl}?action=processView&historyTaskId=${
                  row.taskId
                }&appCode=${rlt.appCode}&version=${
                  rlt.version
                }&_r=${new Date().getTime()}`
              );
            } else {
              this.notifyError("无法获取应用的处理地址");
            }
          });
        },
      },
    };
  }
}
</script>

<style scoped lang="scss">
// .fa-circle {
//   font-size: large;
// }

// .fa-circle.red {
//   color: red;
// }

// .fa-circle.yellow {
//   color: orange;
// }

// .fa-circle.green {
//   color: green;
// }
// .workflow-title {
//   padding: 5px 0;
// }
// .workflow-toolbar {
//   text-align: right;
// }
// .workflow-content {
//   margin-top: 16px;
// }
</style>

